var bitch = document.getElementsByClassName("bitch");
var slideshow1 = document.getElementsByClassName("lb1")[0];
var hdul1 = document.querySelector('.hd1 ul')
var counter = 1;
act = setInterval(function() {
    if (counter == 3) {
        counter = 0;
    }
    for (var i = 0; i < bitch.length; i++) {
        bitch[i].setAttribute("class", "bitch");
    }
    bitch[counter].setAttribute("class", "bitch active");
    var targer = counter * -1920;
    moveAnimation2(slideshow1, targer);
    counter++;
}, 2000)

for (var i = 0; i < bitch.length; i++) {

    bitch[i].index = i;

    bitch[i].onmouseenter = function() {
        for (var i = 0; i < bitch.length; i++) {
            bitch[i].setAttribute("class", "bitch");
        }
        this.setAttribute("class", "active bitch");
        var targer = this.index * -1920;
        moveAnimation2(slideshow1, targer);
    }
}

hdul1.onmouseenter = function() {
    clearInterval(act);
}
hdul1.onmouseleave = function() {
    act = setInterval(function() {
        if (counter == 3) {
            counter = 0;
        }
        for (var i = 0; i < bitch.length; i++) {
            bitch[i].setAttribute("class", "bitch");
        }
        bitch[counter].setAttribute("class", "bitch active");
        var targer = counter * -1920;
        moveAnimation2(slideshow1, targer);
        counter++;
    }, 2000)
}

function moveAnimation2(ele, index) {
    clearInterval(ele.time);
    ele.time = setInterval(function() {

        if (ele.offsetLeft == index) {
            clearInterval(ele.time);
        } else {
            var targer = (index - ele.offsetLeft) / 10;
            if (targer > 0) {
                targer = Math.ceil(targer)
            } else if (targer < 0) {
                targer = Math.floor(targer)
            }
            ele.style.left = ele.offsetLeft + targer + "px";
        }
    }, 20)
}
var active1 = document.getElementsByClassName("active1"); //获取每个li
var slideshow = document.getElementsByClassName("lb2")[0]; //获取轮播图片的ul
var wicket = document.getElementsByClassName("sign-content")[0]; //获取大盒子
var prev = document.getElementsByClassName("prev")[0]; //获取左箭头
var next = document.getElementsByClassName("next")[0]; //获取右箭头
var counter_tp = 0; //获取图片下标
var counter_xyd = 0; //获取小圆点下标

// 1.鼠标移入wicket内左右箭头显示
// 移出隐藏
wicket.onmouseenter = function() { //鼠标移入事件
    prev.style.display = "block"; //左箭头显示
    next.style.display = "block"; //右箭头显示
    clearInterval(wicket.automove); //清除自动定时器
}
wicket.onmouseleave = function() { //鼠标移出事件
    prev.style.display = "none"; //左箭头隐藏
    next.style.display = "none"; //右箭头隐藏
    automove();
}

prev.onclick = function() { //左箭头点击事件
    // 图片下标，小圆点下标自减

    if (counter_tp = 0) {
        counter_tp = slideshow.children.length - 1;
        slideshow.style.left = counter_tp * (-600) + "px";

    }
    counter_tp--;
    counter_xyd--;
    // 当小圆点索引小于0时，返回索引为active.length - 1的圆点
    if (counter_xyd < 0) {
        counter_xyd = active1.length - 1;
    };

    // 将小圆点遍历，将小圆点样式清空，然后给当前小圆点添加样式
    for (var i = 0; i < active1.length; i++) {
        active1[i].setAttribute("class", "active1");
    }
    active1[counter_xyd].setAttribute("class", "active1 active2");
    // 
    // 偏移量计算，偏移量为图片索引下标*负的   图片宽度
    var targer = counter_tp * -600;
    // 调用缓动动画
    moveAnimation2(slideshow, targer);
}
next.onclick = function() { //右箭头点击事件
    // 图片和小圆点下标自增
    counter_tp++;
    counter_xyd++;
    // 如果图片索引等于ul下孩子的长度，拉回
    if (counter_tp == slideshow.children.length) {
        slideshow.style.left = 0;
        // 设置counter_tp为1,这样就可以看到第二张图片了
        counter_tp = 1;
    }
    // 如果小圆点索引等于 ，返回索引下标为0的小圆点
    if (counter_xyd == active1.length) {
        counter_xyd = 0;
    }
    // 将小圆点遍历，将小圆点样式清空，然后给当前小圆点添加样式
    for (var i = 0; i < active1.length; i++) {
        active1[i].setAttribute("class", "active1");
    }
    active1[counter_xyd].setAttribute("class", "active1 active2");
    // 偏移量计算，偏移量为图片索引下标*负的   图片宽度
    var targer = counter_tp * -600;
    // 调用缓动动画
    moveAnimation2(slideshow, targer);
}

function automove() { //封装函数
    wicket.automove = setInterval(function() { //延时定时器

        next.onclick();

    }, 2000)

}
automove();